<template>
  <div class="system-info-page">
    <el-card class="system-info-card">
      <template #header>
        <div class="card-header">
          <span>系统信息监控</span>
          <el-button type="primary" @click="refreshInfo">刷新</el-button>
        </div>
      </template>
      <SystemInfo />
    </el-card>
  </div>
</template>

<script setup>
import SystemInfo from '../components/SystemInfo.vue'
import { onMounted, onUnmounted } from 'vue'

// 定时刷新系统信息
let timer = null
const AUTO_REFRESH_INTERVAL = 5000 // 5秒刷新一次

const refreshInfo = () => {
  const systemInfoComponent = document.querySelector('.system-info')
  if (systemInfoComponent) {
    // 调用组件的刷新方法
    systemInfoComponent.__vueParentComponent.ctx.getInfo()
  }
}

onMounted(() => {
  // 初始获取信息
  refreshInfo()
  
  // 设置定时刷新
  timer = setInterval(refreshInfo, AUTO_REFRESH_INTERVAL)
})

onUnmounted(() => {
  // 清理定时器
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})
</script>

<style scoped>
.system-info-page {
  padding: 20px;
  height: 100%;
}

.system-info-card {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
